<template>
  <div id="blance_reg">
    <div class="content-recharge" v-loading="loading">
      <div class="header-title"> {{ $t('member.blance.recharge.recharge') }} 【 TRC20 】</div>
      <div class="row-box">
        <div class="row-wrap">
          <h6> {{ $t('member.blance.recharge.chooseCurrency') }}</h6>
          <div class="wrap-box">
            <div class="wrap" @click="isShow = !isShow">
              <span>{{walletObj.name}}</span>
              <i class="el-icon-arrow-up" v-show="isShow" style="color:#ccc;"></i>
              <i class="el-icon-arrow-down" v-show="!isShow" style="color:#ccc;"></i>
            </div>
            <transition name="el-fade-in-linear">
								<div class="country-ul" v-show="isShow">
									<div class="country-li" v-for="(obj,i) in walletArr" :key="i" @click.stop="setCountry(obj)">
										<div class="li-name">{{obj.name}}</div>
									</div>
								</div>
							</transition>
          </div>
        </div>
        <div class="row-wrap">
          <h6> {{ $t('member.blance.recharge.qrCode') }}</h6>
          <div class="code-img">
            <img :src="qrCode" alt="">
          </div>
        </div>
        <div class="row-wrap">
          <h6> {{ $t('member.blance.recharge.depositAddress') }}</h6>
          <div class="copy-txt">{{walletObj.address}}</div>
          <div class="copy" @click="$copy(walletObj.address)">
            <i class="el-icon-copy-document" style="color: #FF547B"></i>
            <span > {{ $t('member.blance.recharge.copy') }}</span>
          </div>
        </div>  
      </div>
    </div>
  </div>
</template>

<script>
import {coinList } from '@/api/member/blance'
import QRCode from 'qrcode'
export default {
  data() {
    return {
      isShow: false,
      loading: true,
      walletArr: [],
			walletObj: {},
			money_type: '',
			qrCode: '',
      
    };
  },
  computed: {
    cid: function(){
      return this.$route.query.cid ? this.$route.query.cid : '';
    }
  },
  created() {
    this.getList();
  },
  mounted() {

  },
  methods: {
    // 获取币种
		setCountry(obj){
			this.walletObj = obj;
			this.isShow = false;
		},
    getList(){
      coinList().then(async (res) => {
        if(res.code == 0){
          this.walletArr = res.data;
          this.walletObj = this.cid ? this.walletArr.find(v=>{
            return v.money_type == this.cid;
          }) : this.walletArr[0]
          this.money_type = this.walletObj.money_type;
          this.qrCode = await QRCode.toDataURL(`${this.walletObj.address}`)
        }
        this.loading = false;
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      })
    },
  }
};
</script>

<style scoped lang="scss">
  .content-recharge {
    width: 100%;
    background: #fff;
  }
  .header-title {
    width: 100%;
		padding: 18px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #DCDFE6;
  }
  .row-box {
    padding-left: 20px;
    padding-bottom: 80px;
    .row-wrap {
      padding-top: 24px;
    }
    h6 {
      font-size: 12px;
      color: #868686;
      line-height: 17px;
      margin-bottom: 13px;
      font-weight: normal;
    }
    .wrap-box {
      position: relative;
      .wrap {
        color: #FF547B;
				width: 360px;
				height: 40px;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 15px;
				box-sizing: border-box;
      }
      .country-ul {
				position: absolute;
				left: 0px;
				top: 40px;
				width: 360px;
				min-height: 70px;
				overflow: auto;
				background-color: rgb(255, 255, 255);
    		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
				z-index: 11;
				.country-li {
					padding: 10px 16px;
					box-sizing: border-box;
				}
				.country-li:hover {
					background: #F7F7F7;
					.li-name {
						color: #FF547B;
					}
				}
			}
    }
    .code-img {
      img {
        width: 162px;
        height: 162px;
      }
    }
    .copy-txt {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      line-height: 25px;
      margin-bottom: 8px;
    }
    .copy {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #FF547B;
      line-height: 17px;
      span {
        margin-left: 6px;
      }
    }
  }
</style>
